<template>
    <div>
      <el-dialog title="导出" :visible.sync="exportVisible" :modal-append-to-body="false">
        <p>确认导出 {{myName}}？</p>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="exportExcel()">确 定</el-button>
          <el-button @click="cancel()">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    


</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
    export default {
      name: "Export",
      components:{
        FileSaver,
        XLSX,
      },
      props:{
        myId:String, //表格id
        myName:String, //文件名
        myClick:Number//点击启动
      },
      watch:{
        myClick() {
            this.exportVisible=true
            console.log(this.myName)
        },
      },
      data() {
        return {
          exportVisible:false,
        }
      },
        methods: {
        cancel(){
         this.exportVisible=false
        },
          // 导出表格
          exportExcel() {
            /* generate workbook object from table */
            var wb = XLSX.utils.table_to_book(document.querySelector(this.myId))
            console.log(wb)
            /* get binary string as output */
            var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'})
            try {
              FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), this.myName+'.xlsx')
            } catch (e) {
              if (typeof console !== 'undefined') console.log(e, wbout)
            }
            this.exportVisible=false
            return wbout
          },
        },
    }
</script>

<style scoped>

</style>
